<template>
<!-- 该文件已弃用，特标注，勿修改 -->
<!-- 该文件已弃用，特标注，勿修改 -->
<!-- 该文件已弃用，特标注，勿修改 -->
<!-- 重要的话说三遍    ixiang_L ==> 2020-01-10 -->
  <div id="AsideBar" :style="{height:height}">
    <!-- 上传头像 -->
    <div class="AsideBar_img">
      <img class="wer" src="../assets/images/GeRen_rw/u7.png" alt />
    </div>
    <!-- <div class="admad">admin</div>  更改字体颜色 -->
    <div class="AsideBar_admad">
      <p class="AsideBar_adm">admin</p>
      <p class="AsideBar_ad">采购部</p>
      <p class="AsideBar_ad">采购专员</p>
    </div>
    <!-- 侧边栏 -->
    <el-row class="tac">
      <el-col :style="{height:heightbycebian}">
        <el-menu
          default-active="1"
          @open="handleOpen"
          @close="handleClose"
          @select="handleSelect"
          background-color="#2E3A4E"
          text-color="#ffffff"
          active-text-color="#ffffff"
          class="el-menu"
        >
          <el-menu-item index="1" @click="Header_rou">
            <span class="icons">
              <img class="Aside_tubiao" :src="require('../assets/images/'+imgsrc)" alt />
            </span>
            <span slot="title">个人中心</span>
            <span class="divBymenu" v-if="click == 1"></span>
          </el-menu-item>
          <el-menu-item index="2" @click="Header_rou1">
            <span class="icons">
              <img class="Aside_tubiao" src="../assets/images/GeRen_rw/u38.png" alt />
            </span>
            <span slot="title">总裁管理</span>
            <span class="divBymenu" v-if="click == 2"></span>
          </el-menu-item>
          <el-menu-item index="3" @click="Header_rou2">
            <span class="icons">
              <img class="Aside_tubiao" src="../assets/images/GeRen_rw/u47.png" alt />
            </span>
            <span slot="title">财务管理</span>
            <span class="divBymenu" v-if="click == 3"></span>
          </el-menu-item>
          <el-menu-item index="4" @click="Header_rou3">
            <span class="icons">
              <img class="Aside_tubiao" src="../assets/images/GeRen_rw/u156.png" alt />
            </span>
            <span slot="title">行政管理</span>
            <span class="divBymenu" v-if="click == 4"></span>
          </el-menu-item>
          <el-menu-item index="5" @click="Header_rou4">
            <span class="icons">
              <img class="Aside_tubiao" src="../assets/images/GeRen_rw/u56.png" alt />
            </span>
            <span slot="title">人事管理</span>
            <span class="divBymenu" v-if="click == 5"></span>
          </el-menu-item>
          <el-menu-item index="6" @click="Header_rou5">
            <span class="icons">
              <img class="Aside_tubiao" src="../assets/images/GeRen_rw/u65.png" alt />
            </span>
            <span slot="title">销售管理</span>
            <span class="divBymenu" v-if="click == 6"></span>
          </el-menu-item>
          <el-menu-item index="7" @click="Header_rou6">
            <span class="icons">
              <img class="Aside_tubiao" src="../assets/images/GeRen_rw/u74.png" alt />
            </span>
            <span slot="title">采购管理</span>
            <span class="divBymenu" v-if="click == 7"></span>
          </el-menu-item>
          <el-menu-item index="8" @click="Header_rou7">
            <span class="icons">
              <img class="Aside_tubiao" src="../assets/images/GeRen_rw/u83.png" alt />
            </span>
            <span slot="title">仓库管理</span>
            <span class="divBymenu" v-if="click == 8"></span>
          </el-menu-item>
          <el-menu-item index="9" @click="Header_rou8">
            <span class="icons">
              <img class="Aside_tubiao" src="../assets/images/GeRen_rw/u92.png" alt />
            </span>
            <span slot="title">生产管理</span>
            <span class="divBymenu" v-if="click == 9"></span>
          </el-menu-item>
          <el-menu-item index="10" @click="Header_rou9">
            <span class="icons">
              <img class="Aside_tubiao" src="../assets/images/GeRen_rw/u92.png" alt />
            </span>
            <span slot="title">产品管理</span>
            <span class="divBymenu" v-if="click == 10"></span>
          </el-menu-item>
          <el-menu-item index="11" @click="Header_rou10">
            <span class="icons">
              <img class="Aside_tubiao" src="../assets/images/GeRen_rw/u101.png" alt />
            </span>
            <span slot="title">设备管理</span>
            <span class="divBymenu" v-if="click == 11"></span>
          </el-menu-item>
          <el-menu-item index="12" @click="Header_rou11">
            <span class="icons">
              <img class="Aside_tubiao" src="../assets/images/GeRen_rw/u119.png" alt />
            </span>
            <span slot="title">品质管理</span>
            <span class="divBymenu" v-if="click == 12"></span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";

export default {
  data() {
    return {
      click : 1,
      height: '',
      heightbycebian:'',
      imgsrc: 'GeRen_rw/u27.png'
    };
  },
  created() {
    this.height = document.documentElement.scrollHeight - 61  + 'px';
    this.heightbycebian = document.documentElement.scrollHeight - 325 + 'px'
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.click = key
    },
    Header_rou(e) {
      console.log(e.index)
      this.$router.push({path:"./PersonalCenterHmPg",query:{index:e.index}});
    },
    Header_rou1(e) {
      this.$router.push({path:"./ManagerAuditHmPg",query:{index:e.index}});
    },
    Header_rou2(e) {
      this.$router.push({path:"./FinanceHmPg",query:{index:e.index}});
    },
    Header_rou3(e) {
      this.$router.push({path:"./AdministrationHmPg",query:{index:e.index}});
    },
    Header_rou4(e) {
      this.$router.push({path:"./PersonnelHmPg",query:{index:e.index}});
    },
    Header_rou5(e) {
      this.$router.push({path:"./SalesHmPg",query:{index:e.index}});
    },
    Header_rou6(e) {
      this.$router.push({path:"./PurchaseHmPg",query:{index:e.index}});
    },
    Header_rou7(e) {
      this.$router.push({path:"./WarehouseHmPg",query:{index:e.index}});
    },
    Header_rou8(e) {
      this.$router.push({path:"./ProductionHmPg",query:{index:e.index}});
    },
    Header_rou9(e) {
      this.$router.push({path:"./ProductHmPg",query:{index:e.index}});
    },
    Header_rou10(e) {
      this.$router.push({path:"./EquipmentHmPg",query:{index:e.index}});
    },
    Header_rou11(e) {
      this.$router.push({path:"./QualityHmPg",query:{index:e.index}});
    },
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
#AsideBar {
  background-color:$AsideBar_color;
  // height: 99%;
  padding: 0px;
  margin: 0px;
}
.el-menu {
  background-color:$AsideBar_color;
  padding: 0px;
  margin: 0px;
  border-right: solid 0px #e6e6e6;
  // width:100%;
}
.divBymenu {
  background-color: rgb(255, 195, 106);
  width: 6px;
  margin: 0px;
  padding: 0px;
  margin-left:-19px;
  height: 100%;
  float: left;
}
.AsideBar_img {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  margin-left: 25px;
  margin-bottom: 8px;
  color:$white;
}
.Aside_tubiao {
  width: 30px;
  height: 30px;
}
.icons {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.icons img {
  width: 24px;
  height: 24px;
}
.el-menu-item {
  height: 50px;
  padding: 0 0;
  line-height: 50px;
}
.AsideBar_admad {
  width: 100%;
  height: 60px;
  margin-top: 60px;
  color: $white;
  text-align: center;
  line-height: 40px;
}
.AsideBar_adm {
  width: 50px;
  height: 20px;
  line-height: 16px;
  margin-left: 60px;
}
.AsideBar_ad {
  height: 20px;
  font-size:$font-size-medium;
  line-height: 20px;
  display: inline-block;
}
.is-active {
  background-color:$Header_color !important; /*颜色更改 */
}
.wer {
  margin-top: 15px;
}
</style>
